<template>
  <div class="ApplicationForm">
    <div class="ApplicationForm-search">
      <div style="display: flex; justify-content: space-between">
        <div>
          <span class="ApplicationForm-search-span-ls">|</span>
          <span class="ApplicationForm-search-span">组合项目</span>
        </div>
        <div class="sesectstyle">
          <el-select
            class="m-2"
            style="width: 100px"
            v-model="Linkageoperation"
            @change="LinkageoperationChange"
            placeholder="批量操作"
          >
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </div>
    </div>
    <div class="ApplicationFormtabletwo">
      <!-- :request-api="getTableList" -->
      <ProTable
        :row-key="(row: string | any) => row.tid"
        ref="proTable"
        :request-auto="false"
        :publicsb="ApplicationFormtabletwo"
        :yesornooperation="yesornooperation"
        :columns="columns"
        :data="Tabledata"
        :showhidden="showhidden"
        :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
        @darg-sort="dargSort"
        highlight-current-row
      >
        <!-- Expand -->
        <template #tableHeader>
          <el-button type="primary" @click="addUser('add')">新增组合项目</el-button>
          <el-button type="primary" @click="Copyitem">复制项目</el-button>
          <el-button type="primary" @click="Pasteitem">粘贴项目</el-button>
        </template>
        <template #expand="scope">
          {{ scope.row }}
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
            <el-button type="primary" link :icon="Delete" @click="deleteZhxm(scope)"></el-button>
          </el-tooltip>
        </template>
        <template #ShiFouBiJian="scope">
          <el-switch
            @click="onoffChange(scope)"
            v-model="scope.row.ShiFouBiJian"
            class="ml-2"
            inline-prompt
            active-text="是"
            inactive-value="否"
            active-value="是"
            inactive-text="否"
          />
        </template>
      </ProTable>
    </div>
    <AddDialogFormGroup @add-on-submit="addOnSubmit" ref="addDialogFormRef" @refresh="getTableData()" />
    <el-dialog v-model="centerDialogVisible" title="温馨提示" width="30%" align-center>
      <span :icon="CloseBold">请选择要做的操作</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="confirmstick"> 覆盖 </el-button>
          <el-button type="primary" @click="confirmadd"> 追加 </el-button>
          <el-button @click="centerDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="zhxmczDialogVisible" @close="clear" destroy-on-close :title="Linkageoperation" width="30%" align-center>
      <el-select
        v-model="sharecz"
        filterable
        remote
        reserve-keyword
        placeholder="请选择组合项目"
        remote-show-suffix
        :remote-method="remoteMethod"
        :loading="loading"
        style="width: 240px"
      >
        <el-option
          v-for="item in GetSelItemAll"
          :key="item.ZuHeXiangMuID"
          :label="item.ZuHeXiangMuMingCheng"
          :value="item.ZuHeXiangMuID"
        />
      </el-select>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="zhxmczCancel">取消</el-button>
          <el-button type="primary" @click="zhxmczConfirm"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// // CirclePlus
import AddDialogFormGroup from "@/views/DataMaintenance/IntegratedProject/components/TagProject/components/addDialogFormGroup.vue";
import { useIntegratedProject } from "@/stores/modules/integratedProject";
import { Delete, CloseBold } from "@element-plus/icons-vue";
import { reactive, ref, computed, watch, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import ProTable from "@/components/tablepublic/index.vue";
import { dataWeihu } from "@/stores/datamaintenance/datatending";
import {
  GetSelItemAllport,
  DeleteWeiHaiYinSuItemDeleteport,
  PutWeiHaiYinSuItemUpdateport,
  PutWeiHaiYinSuItemTiaoZhengShunXuport,
  PostWeiHaiYinSuItemAddport,
  PostWeiHaiYinSuTongYiAddItemport,
  PutWeiHuanYinSuTongYiGengHuanItemport,
  DeleteWeiHaiYinSuTongYiDeleteItemport
} from "@/api/modules/user";
const loading = ref(false);
const sharecz = ref<string>("");
const yesornooperation = ref("组合项目");
const Tabledata = ref<any>([]);
const zhxmczDialogVisible = ref<boolean>(false);
const addDialogFormRef = ref();
const oneselfwhys = ref("危害因素组合项目");
const addUser = (type: string) => {
  dataWeihu().judgePortfolioprojectChange(oneselfwhys.value);
  addDialogFormRef.value.openDialog(type);
};
const GetSelItemAll = ref<any>([]);
const Linkageoperation = ref();
const ApplicationFormtabletwo = ref("ApplicationFormtabletwo");
const centerDialogVisible = ref(false);
const judgewhysid = ref("");
const judgegq = ref("");
// 复制项目
const Copyitem = () => {
  if (Tabledata.value.length == 0) {
    return ElMessage({ type: "error", message: "组合项目为空" });
  } else {
    judgewhysid.value = dataWeihu().sole;
    judgegq.value = dataWeihu().arbitrage;
    dataWeihu().CopyitemChange(Tabledata.value);
  }
};
const remoteMethod = (query: string) => {
  GetSelItemAllport().then((res: any) => {
    if (res.Success == 0) {
      // 输入框要搜索哪个数据item.后面跟什么
      GetSelItemAll.value = res.Data.filter((item: any) => item.ZuHeXiangMuMingCheng.includes(query.toLowerCase()));
    } else {
      ElMessage({
        message: res.Message,
        type: "warning"
      });
    }
  });
};

// 粘贴项目
const Pasteitem = () => {
  if (judgewhysid.value == dataWeihu().sole && judgegq.value == dataWeihu().arbitrage) {
    return ElMessage({ type: "error", message: "危害因素id和岗期没有发生变化禁止粘贴" });
  } else if (dataWeihu().Copyitem.length == 0) {
    return ElMessage({ type: "error", message: "复制项目为空" });
  } else {
    centerDialogVisible.value = true;
  }
};

// 开关
const onoffChange = (scope: any) => {
  console.log(scope.row);
  const data = {
    strWeiHaiYinSuId: dataWeihu().sole,
    strGangQi: dataWeihu().arbitrage,
    strZuHeXiangMuId: scope.row.ZuHeXiangMuID,
    strShiFouBiJian: scope.row.ShiFouBiJian,
    iShunXu: scope.row.ShunXu
  };
  PutWeiHaiYinSuItemUpdateport(data).then((res: any) => {
    console.log(res);
    if (res.Success == 0) {
      return ElMessage({ type: "success", message: "修改成功" });
    }
  });
};

const getTableData = () => {
  useIntegratedProject().getBaoHanZuHeXiangMuSel();
};

const ZuHeXiangMu = computed(() => {
  return dataWeihu().GetSelWeiHaiYinSuData;
});

// 确认添加
const addOnSubmit = (item: any) => {
  if (dataWeihu().sole == "") {
    return ElMessage({ type: "error", message: "请先选择危害因素" });
  } else {
    let arrs = [] as any;
    item.listRight.forEach((item: any) => {
      const obj = {
        strZuHeXiangMuId: item.key,
        strShiFouBiJian: "是"
      };
      arrs.push(obj);
    });
    console.log(arrs);
    if (arrs.length != 0 && Tabledata.value.length != 0) {
      Tabledata.value.forEach((item: any) => {
        const obj = {
          strZuHeXiangMuId: item.ZuHeXiangMuID,
          strShiFouBiJian: "是"
        };
        arrs.push(obj);
      });
    } else if (arrs.length == 0) {
      return ElMessage({ type: "error", message: "请先选择组合项目" });
    }
    const data = {
      strWeiHaiYinSuId: dataWeihu().sole,
      strGangQi: dataWeihu().arbitrage,
      listItem: arrs
    };
    PostWeiHaiYinSuItemAddport(data).then((res: any) => {
      console.log(res);
      if (res.Success == 0) {
        Tabledata.value = res.Data;
        addDialogFormRef.value.closeDialog();
        return ElMessage({ type: "success", message: "添加成功" });
      }
    });
  }
};
const clear = () => {
  Linkageoperation.value = "";
  sharecz.value = "";
};
const deleteZhxm = (scope: any) => {
  console.log(Tabledata.value);

  console.log(scope.row);
  ElMessageBox.confirm("确认删除吗？", "温馨提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    const data = {
      strWeiHaiYinSuId: dataWeihu().sole,
      strGangQi: dataWeihu().arbitrage,
      strZuHeXiangMuId: scope.row.ZuHeXiangMuID,
      strShiFouBiJian: scope.row.ShiFouBiJian,
      iShunXu: scope.row.ShunXu
    };
    DeleteWeiHaiYinSuItemDeleteport(data).then((res: any) => {
      console.log(res);
      if (res.Success == 0) {
        Tabledata.value.forEach((item: any, index: number) => {
          if (item.tid == scope.row.tid) {
            Tabledata.value.splice(index, 1);
          }
        });
        ElMessage({
          type: "success",
          message: "删除成功"
        });
      }
    });
  });
};

onMounted(() => {
  remoteMethod("");
});

// 确认覆盖
const confirmstick = () => {
  Tabledata.value = dataWeihu().Copyitem;
  const arrs = [] as any;
  Tabledata.value.forEach((item: any) => {
    console.log(item);
    let obj = {
      strZuHeXiangMuId: item.ZuHeXiangMuID,
      strShiFouBiJian: item.ShiFouBiJian
    };
    arrs.push(obj);
    console.log(arrs);
  });
  const data = {
    strWeiHaiYinSuId: dataWeihu().sole,
    strGangQi: dataWeihu().arbitrage,
    listItem: arrs
  };
  PostWeiHaiYinSuItemAddport(data).then((res: any) => {
    console.log(res);
    if (res.Success == 0) {
      return ElMessage({ type: "success", message: "覆盖成功" });
    }
  });
  console.log(data);
  centerDialogVisible.value = false;
};

const LinkageoperationChange = () => {
  zhxmczDialogVisible.value = true;
};

const zhxmczCancel = () => {
  clear();
  zhxmczDialogVisible.value = false;
};

const zhxmczConfirm = () => {
  if (sharecz.value == "") {
    return ElMessage({ type: "error", message: "请先选择组合项目" });
  } else if (Linkageoperation.value == "统一添加组合项目") {
    const data = {
      strZuheXiangMuId: sharecz.value
    };
    PostWeiHaiYinSuTongYiAddItemport(data).then((res: any) => {
      console.log(res);
      if (res.Success == 0) {
        // 检查在 Tabledata.value 数组中是否已经存在具有相同 ZuHeXiangMuID 的元素。如果不存在，就将 res.Data[0] 添加到数组中。
        if (!Tabledata.value.some((item: any) => item.ZuHeXiangMuID === res.Data[0].ZuHeXiangMuID)) {
          Tabledata.value.push(res.Data[0]);
        }
        ElMessage({ type: "success", message: "添加成功" });
      }
    });
  } else if (Linkageoperation.value == "更换组合项目") {
    if (dataWeihu().zuhexiangmu.ZuHeXiangMuID == "" || dataWeihu().zuhexiangmu.ZuHeXiangMuID == undefined) {
      return ElMessage({ type: "error", message: "请先选择组合项目" });
    } else {
      const data = {
        strTiaoZhengQianZuheXiangMuId: dataWeihu().zuhexiangmu.ZuHeXiangMuID,
        strTiaoZhengHouZuheXiangMuId: sharecz.value
      };
      PutWeiHuanYinSuTongYiGengHuanItemport(data).then((res: any) => {
        console.log(res);
        if (res.Success == 0) {
          Tabledata.value.forEach((item: any, index: number) => {
            if (res.Data[0].ZuHeXiangMuID == item.ZuHeXiangMuID) {
              Tabledata.value.splice(index, 1);
            }
            console.log(111);
            if (item.ZuHeXiangMuID == dataWeihu().zuhexiangmu.ZuHeXiangMuID) {
              console.log(111);
              Tabledata.value[index] = res.Data[0];
            }
          });
          return ElMessage({ type: "success", message: "操作成功" });
        }
      });
    }
  } else if (Linkageoperation.value == "统一删除组合项目") {
    const data = {
      strZuheXiangMuId: sharecz.value
    };
    DeleteWeiHaiYinSuTongYiDeleteItemport(data).then((res: any) => {
      if (res.Success == 0) {
        console.log(Tabledata.value);

        Tabledata.value.forEach((item: any, index: number) => {
          if (item.ZuHeXiangMuID == res.Data) {
            Tabledata.value.splice(index, 1);
            return ElMessage({ type: "success", message: "删除成功" });
          }
        });
      }
    });
  }
  Linkageoperation.value = "";
  zhxmczDialogVisible.value = false;
};

// 确认追加
const confirmadd = () => {
  console.log(dataWeihu().Copyitem, Tabledata.value);

  if (Tabledata.value == dataWeihu().Copyitem) {
    console.log(111);
  }
  let Tabledataname = [] as any;
  let dataWeihuname = [] as any;
  Tabledata.value.forEach((item: any) => {
    Tabledataname.push(item.ZuHeXiangMuMingCheng);
  });
  dataWeihu().Copyitem.forEach(item1 => {
    dataWeihuname.push(item1.ZuHeXiangMuMingCheng);
  });
  console.log(Tabledataname, dataWeihuname);
  if (Tabledataname.every((value, index) => value === dataWeihuname[index])) {
    centerDialogVisible.value = false;
    return;
  } else {
    if (dataWeihu().Copyitem.length != 0) {
      dataWeihu().Copyitem.forEach((item: any) => {
        Tabledata.value.push(item);
      });
    }
    const arrs = [] as any;
    Tabledata.value.forEach((item: any) => {
      console.log(item);
      let obj = {
        strZuHeXiangMuId: item.ZuHeXiangMuID,
        strShiFouBiJian: item.ShiFouBiJian
      };
      arrs.push(obj);
    });
    const data = {
      strWeiHaiYinSuId: dataWeihu().sole,
      strGangQi: dataWeihu().arbitrage,
      listItem: arrs
    };
    PostWeiHaiYinSuItemAddport(data).then((res: any) => {
      console.log(res);

      if (res.Success == 0) {
        Tabledata.value = res.Data;
        return ElMessage({ type: "success", message: "追加成功" });
      }
    });
    centerDialogVisible.value = false;
  }
};

watch(
  ZuHeXiangMu,
  () => {
    Tabledata.value = ZuHeXiangMu.value.WeiHaiYinSuItem;
    console.log(Tabledata.value);
  },
  { deep: true }
);
// 控制分页显示隐藏
const showhidden = ref<boolean>(false);
const proTable = ref();

// 表格配置项
const columns = reactive<any>([
  {
    type: "sort",
    label: "排序",
    width: 80
  },
  { type: "index", label: "序号", width: 80 },
  { prop: "ZuHeXiangMuMingCheng", label: "组合项目名称", width: 150 },
  { prop: "ShiFouBiJian", label: "是否必检" },
  { prop: "GuoBiaoDaiMa", label: "国标代码" },
  { prop: "operation", label: "操作", fixed: "right", width: 100 }
]);
// 调序
const dargSort = (item: any) => {
  const data = {
    strWeiHaiYinSuId: dataWeihu().sole,
    strGangQi: dataWeihu().arbitrage,
    strZuHeXiangMuId: item.removedItem.ZuHeXiangMuID,
    iTiaoZhengQianShunXu: item.removedItem.ShunXu,
    iTiaoZhengHouShunXu: item.newIndex + 1
  };
  console.log(data);

  PutWeiHaiYinSuItemTiaoZhengShunXuport(data).then((res: any) => {
    console.log(res);
  });
};
const options = [
  {
    value: "更换组合项目",
    label: "更换组合项目"
  },
  {
    value: "统一添加组合项目",
    label: "统一添加组合项目"
  },
  {
    value: "统一删除组合项目",
    label: "统一删除组合项目"
  }
];
</script>

<style scoped lang="scss">
.sesectstyle {
  :deep .el-input__wrapper {
    box-shadow: none;
  }
  :deep .el-select {
    --el-select-input-focus-border-color: initial;
  }
  :deep(.el-select:hover) {
    outline: none;
  }

  /* 去除边框 */
  :deep(.el-select .el-input__wrapper) {
    box-shadow: none !important;
  }

  /* 去除选中时蓝色边框（下面两个都要加上） */
  :deep(.el-input .el-input__wrapper.is-focus) {
    box-shadow: none !important;
  }
  :deep(.el-select .el-input.is-focus .el-input__wrapper) {
    border-color: #dcdfe6 !important;
    box-shadow: none !important;
  }
}
.ml-2 {
  --el-switch-on-color: #13ce66;
  --el-switch-off-color: #ff4949;
}
.ApplicationForm {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .ApplicationForm-search {
    height: 25px;
    padding: 10px 20px;
    background-color: white;
    border-radius: 5px;
    .ApplicationForm-search-span-ls {
      font-size: larger;
      font-weight: 900;
      line-height: 0;
      color: #239487;
    }
    .ApplicationForm-search-span {
      margin-left: 5px;
      color: #239487;
    }
  }
  .ApplicationFormtabletwo {
    height: calc(100vh - 280px);
    margin-top: 5px;
  }
}
</style>
